<template>
  <div id="bimface"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  async mounted() {
    /*eslint-disable*/
    const {viewToken, fileId} = await this.getBimfaceList();
    // var viewToken = '6760f6f39c7b4f278750940f4f78f9d1';
    // 声明Viewer及App
    var viewer3D;
    var app;
    var viewAdded = false;
    var map;
    var loaderConfig = new BimfaceSDKLoaderConfig();
    loaderConfig.viewToken = viewToken;
    BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
    function successCallback(viewMetaData) {
      var dom4Show = document.getElementById('bimface');
      // 设置WebApplication3D的配置项
      var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
      webAppConfig.domElement = dom4Show;
      webAppConfig.enableLogarithmicDepthBuffer = true;
      // 创建WebApplication3D，用以显示模型
      app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
      app.addView(viewToken);
      viewer3D = app.getViewer();
      // 增加加载完成监听事件
      viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() {
        viewAdded = true;
        //自适应屏幕大小
        window.onresize = function() {
          viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
        }
        var mapConfig = new Glodon.Bimface.Plugins.TileMap.MapConfig();
        mapConfig.viewer = viewer3D;
        // // 设置模型载入的基点
        // mapConfig.basePoint = {
        //   "x": -85689.088,
        //   "y": -62066.347
        // };
        // // 设置模型载入基点所对应的经纬度（WGS84）
        // mapConfig.modelPosition = [121.62844633392,29.840569498277];
        // // 设置模型的旋转弧度值
        // mapConfig.modelRotationZ = 0 * Math.PI / 180;
        // // 设置模型零零标高对应的高程值，单位为米
        // mapConfig.modelAltitude = 3.0;
        // 构造地图对象
        map = new Glodon.Bimface.Plugins.TileMap.Map(mapConfig);
        // 设置地图类型为天地图的影像底图，天地图key可在http://lbs.tianditu.gov.cn/server/MapService.html申请
        map.setMapSource({
          url:'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebbfd0ea032ff7f43004fdbe059fe4cf',
          provider:'Tianditu',
          credit: Glodon.Bimface.Common.Credit.Tianditu
        });
        // 渲染场景
        viewer3D.render();
      });
    }

    // 加载失败回调函数
    function failureCallback(error) {
      console.log(error);
    }
  },
  methods: {
    async getBimfaceList() {
      const { success, data: { data }} = await this.$Model.getBimfaceList({
        // project_name: this.projectName,
        projectId: this.projectId,
        pageFlag: false,
        moduleType: '4', // 主页模型
      });
      if (success && data) {
        const list = data.list || [];
        const currentItem = list[0];
        if (currentItem) {
          const { viewToken, fileId } = currentItem;
          await this.getBimConfig(currentItem);
          this.fileId = fileId;
          return {viewToken, fileId};
        }
        this.$message.warning('暂无模型');
      }
    },
    // 获取模型配置
    async getBimConfig({ fileId }) {
      const { success, data: { data }} = await this.$Model.getBimConfig({
        pageFlag: false,
        fileId
      });
      if (success && data) {
        const list = data.list || [];
        return list[0] || {};
      }
    },
  }
};
</script>

<style scoped lang="scss">
  #bimface {
    width: 100%;
    height: 100%;
  }
</style>
